<template>
    <button @click="startCountdown" :disabled="isCountingDown" class="button gradient">
      {{ buttonText }}
    </button>
  </template>
  
<script lang="ts">
  import { ref } from 'vue';
  
  export default {
    name: 'CountdownButton',
    setup() {
      const isCountingDown = ref(false);
      const countdownTime = ref(60);
      const buttonText = ref('获取验证码');
  
      const startCountdown = () => {
        if (isCountingDown.value) return;
  
        isCountingDown.value = true;
        buttonText.value = ` ${countdownTime.value}s`;
  
        const interval = setInterval(() => {
          countdownTime.value--;
          buttonText.value = ` ${countdownTime.value}s`;
  
          if (countdownTime.value <= 0) {
            clearInterval(interval);
            isCountingDown.value = false;
            countdownTime.value = 60;
            buttonText.value = '获取验证码';
          }
        }, 1000);
      };
  
      return {
        isCountingDown,
        buttonText,
        startCountdown,
      };
    },
  };
</script>
  
<style scoped>
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-radius: 25px;
  }

  .button.gradient {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 25px;
    background-color: #1989FA;
    color: beige;
    border: none;
  }

  .button.gradient:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-image: linear-gradient(45deg, #1989FA, #2046dd);
    background-size: 300% 300%;
    animation: gradientBG 10s ease infinite;
    z-index: -1;
  }

  .button.gradient span {
    position: relative;

    z-index: 1;
  }

  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

</style>
  